<template>
	<view class="bg-white w100 pb-30" style="box-shadow: 0px 0px 8px 0px rgba(105, 70, 255, 0.3);border-radius: 10px 10px 0px 0px;">
		<view class="flex view_text">
			<view @click="style = 1" class="center br u-flex-1" :class="{text:style == 1}">
				<view class="ml-10">给自己叫</view>
			</view>
			<view @click="style = 2" class="center br u-flex-1" :class="{text:style == 2}">
				<view class="" @click="daiti">给朋友叫</view>
			</view>
		</view>
		<!-- 起始点 -->
		<view class="plr-36">
			<view class="flex_l ptb-30 bb" @click="getAddress(1)">
				<view class="bg-green radius mt-10" style="width: 28rpx;height: 28rpx;"></view>
				<view class="ml-30">
					<view class="">{{start.name}}</view>
					<view v-if="start.flag" class="size-24">推荐上车点</view>
					<view v-else class="size-24">{{start.address}}</view>
				</view>
			</view>
			<view class="flex_l ptb-30 bb" @click="getAddress(2)">
				<view class="radius mt-10" style="background-color: #014495; width: 28rpx;height: 28rpx;"></view>
				<view class="ml-30">
					<view v-if="end.address">
						<view class="">{{end.name}}</view>
						<view class="size-24">{{end.address}}</view>
					</view>
					<view v-else class="">请输入目的地</view>
				</view>
			</view>
		</view>
		
		<view class="bb ptb-25 flex">
			<view class="center br u-flex-1">
				<image src="../../static/xianzai.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
				<view @click="depart = 1;time='预约时间'" class="ml-10" :style="{color:depart == 1 ? '#014495' : ''}">现在出发</view>
			</view>
			
			<view class="center br u-flex-1">
				<image src="../../static/time.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
				<view :style="{color:depart == 2 ? '#014495' : ''}" class="ml-10" @click="getTime">{{time}}</view>
				<view @click="time='预约时间'" v-show="time!='预约时间'" style="background-color: #014495;" class="size-22 plr-5 white radius-10">重置</view>
			</view>
		</view>
		

		<!-- but -->
		<view class="mlr-36">
				<!-- <button type="default" open-type="share">分享</button> -->
			<u-button type="primary" shape="square" :ripple="true" @click="dj_submit">呼叫代驾</u-button>

		</view>
		<!-- <view class="w100 bg-blue" style="height:2vh;" @click="dj_submit"></view> -->
		<!-- 时间 -->
		<u-popup v-model="showTime" mode="bottom" height="400" @close="$emit('close')">
			<longDate type="day" :openStatus="true" :getDayNum="3" :chooesMaxDay="3" @select="onSelectTime">
			</longDate>
		</u-popup>

	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import amapFile from '../../libs/amap-wx.js'
	import longDate from '../long-date/long-date.vue'
	export default {
		components: {
			longDate
		},
		//代人叫车
		props: ["other", "showTime","location"],
		data() {
			return {
				time: '预约时间',
				depart:1,
				style:1
			}
		},
		computed:{
			...mapState(["start","end"])
		},
		methods: {
			// 选时间
			getTime() {
				this.$emit('showTime')
				this.depart = 2
			},
			daiti() {
				uni.navigateTo({
					url: '/pages/home/dj-other'
				})
			},
			// 确定时间
			onSelectTime(res) {
				console.log(res);
				if (res.tip) {
					uni.showToast({
						title: res.tip,
						icon: 'none'
					})
				} else {
					this.time = res.time
					this.$emit('close')
				}
			},
			confirmTime(time) {
				console.log(time);
			},
			getAddress(type) {
				uni.navigateTo({
					url: '/pages/home/search?type=' + type +'&location='+this.location
				})
			},
			dj_submit() {
				if (Object.keys(this.end).length == 0) {
					uni.showToast({
						title: '请选择目的地',
						icon: 'none'
					})
				} else {
					let query = {
						time: this.time,
						other: this.other,
					}
					console.log(1111, query);
					uni.navigateTo({
						url: '/pages/home/dj-confirm?query=' + encodeURIComponent(JSON.stringify(query))
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-primary-hover {
		background-color: $blue !important;
	}
	
	.view_text {
		font-size: 38rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #999999;
		background-color: #F1F1F1;
		border-radius: 0rpx 20rpx 20rpx 0rpx;
		height: 80rpx;
		
		view {
			height: 100%;
			line-height: 80rpx;
		}
	}
	.text {
		font-size: 38rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		background-color: #FFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}
</style>
